<template>
  <view class="channelScreenCoice">
	  <tn-navbar>通道屏显管理</tn-navbar>
		<view class="tn-mb tn-mt tn-p tn-shadow">
		<view class="tn-mb   "><tn-title   title="屏显和语音" mode="vLine" sub-title="parkLotName" assist-color="tn-blue" /></view>
		   
          <tn-form ref="formRef" :model="formData" label-position="top">
          
			

         <tn-form-item label="屏显第一行">
         				 <view class="tn-flex justify-between">
         				<tn-input v-model="formData.carPlate"  placeholder="输入显示文字" :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
         				<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
         				<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择文字颜色" >
         					
         					<template #suffix>
         						<tn-icon name="sort"></tn-icon>
         					</template>
         					
         				</tn-input>
         				</tn-bubble-box>
         			</view>
         </tn-form-item>	   
		<tn-form-item label="屏显第二行">
								 <view class="tn-flex justify-between">
								<tn-input v-model="formData.carPlate"  placeholder="输入显示文字" :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
								<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
								<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择文字颜色" >
									
									<template #suffix>
										<tn-icon name="sort"></tn-icon>
									</template>
									
								</tn-input>
								</tn-bubble-box>
							</view>
				</tn-form-item>	   
				
				<tn-form-item label="屏显第三行">
								 <view class="tn-flex justify-between">
								<tn-input v-model="formData.carPlate"  placeholder="输入显示文字" :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
								<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
								<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择文字颜色" >
									
									<template #suffix>
										<tn-icon name="sort"></tn-icon>
									</template>
									
								</tn-input>
								</tn-bubble-box>
							</view>
				</tn-form-item>	   
			
          </tn-form>
        
                   <view  class=" tn-flex justify-around" ><tn-button  width="40%" size="xl" text-color="tn-white"
                     bg-color="tn-gradient-bg__cool-8">测试屏显</tn-button>
                     <tn-button   width="40%" size="xl" text-color="tn-white"
                       bg-color="tn-gradient-bg__cool-8">设置闲时屏显</tn-button>
                     
                     
                     </view> 

                   
        </view> 
      


  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import {   COUPON_TYPE } from "@/utils/dict"; // 引入字典
import { onLoad } from "@dcloudio/uni-app"; 
//表单配置处理-背景样式处理
const customStyleInput=ref( {backgroundColor:'#ededed75'}) 
const customStyleBorder=ref( false) 
// 字典处理-字典枚举映射 
const pickerDict = ref({
	dict: {
    couponType: COUPON_TYPE
	},
	label: {couponType:{}}
});
 

 
// 字典处理-处理字典数据格式
const getDictLabel = () => {
	pickerDict.value.label = {};
	for (let key in pickerDict.value.dict) {
		let dict = pickerDict.value.dict[key];
		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
			acc[cur.value] = cur.label;
			return acc;
		}, {});
	}
};

const getDetailById = ()=>{
	console.log('getDetailById')
	formData.value=  {
		isPass: 1,
		carPlate: "", // 修改为车场编号
		couponType: "", // 修改为通讯码
		responsiblePerson: "", // 修改为负责人
		managementPhone: "", // 修改为管理处电话
		
		systemType: "", // 修改为系统类型
		totalParkingSpaces: "", // 修改为总停车位
		longitude: "", // 修改为经度
		latitude: "", // 修改为纬度
		province: "",
		city: "",
		district: "",
		address: "",
		remarks: "", // 修改为备注
	}
}
  // 表单数据模型
	const formData = ref({
		isPass: 1,
		carPlate: "", // 修改为车场编号
		couponType: "", // 修改为通讯码
		responsiblePerson: "", // 修改为负责人
		managementPhone: "", // 修改为管理处电话
		
		systemType: "", // 修改为系统类型
		totalParkingSpaces: "", // 修改为总停车位
		longitude: "", // 修改为经度
		latitude: "", // 修改为纬度
		province: "",
		city: "",
		district: "",
		address: "",
		remarks: "", // 修改为备注
	});
    // 确认选择器的选择
    const confirmBubble = (dict, labelKey, value) => {
    	console.log('confirmBubble=>', labelKey);
    	console.log('confirmBubble1=>', dict[value].value);
    	formData.value[labelKey] = dict[value].value;
    	// closePicker(); // 关闭选择器
    };

  onLoad(() => {
	getDictLabel();
	getDetailById();
});

	defineExpose({ getDetailById }); // 提供 open 方法，用于打开弹窗
  </script>

<style scoped>

:deep(.tn-radio-group){ 
  justify-content: space-around;
}

.floating-button {
	position: fixed;
	/* 固定定位 */
	bottom: 20rpx;
	/* 距离底部20rpx */
	left: 0;
	/* 左对齐 */
	right: 0;
	/* 右对齐 */
	margin: 0 auto;
	/* 居中 */
}
</style>